<!-- 修改密码 -->
<template>
  <view class="editpassword-box">
    <view class="editpassword_text">
      <u-form :model="form" ref="uForm" :label-width="290">
        <view class="remack"> 温馨提示：密码由6-18位英文字母/数字组成 </view>
        <view class="editpassword-form-box">
          <u-form-item prop="oldPassword" :border-bottom="false">
            <view class="user_pwd">
              <image
                src="../../static/my/mima.png"
                style="width: 32rpx; height: 32rpx"
              ></image>
              <u-input
                style="flex: 1"
                v-model="form.oldPassword"
                type="password"
                name="pwd"
                :maxlength="18"
                placeholder="请输入旧密码"
              />
            </view>
          </u-form-item>
          <u-form-item prop="newPassword" :border-bottom="false">
            <view class="user_pwd">
              <image
                src="../../static/my/mima.png"
                style="width: 32rpx; height: 32rpx"
              ></image>
              <u-input
                style="flex: 1"
                v-model="form.newPassword"
                type="password"
                name="pwd"
                :maxlength="18"
                placeholder="密码为6~18位数字字母组合"
              />
            </view>
          </u-form-item>
          <u-form-item prop="passWord1" :border-bottom="false">
            <view class="user_pwd">
              <image
                src="../../static/my/mima.png"
                style="width: 32rpx; height: 32rpx"
              ></image>
              <u-input
                style="flex: 1"
                v-model="form.passWord1"
                type="password"
                name="pwd"
                :maxlength="18"
                placeholder="请再次输入新密码"
              />
            </view> </u-form-item
        ></view>
      </u-form>
      <u-button type="primary" @click="submit">确认修改</u-button>
    </view></view
  >
</template>
<script>
export default {
  name: 'editpassword',
  data() {
    // 密码验证
    const pwdCheck = async (rule, value, callback) => {
      let reg = /^(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{6,18}$/
      if (!value) {
        return callback(new Error('密码不能为空'))
      } else if (value.length < 6) {
        return callback(new Error('新密码不能少于6位'))
      } else if (value.length > 18) {
        return callback(new Error('新密码最长不能超过18位'))
      } else if (!reg.test(value)) {
        return callback(new Error('密码应为数字字母组合，请检查格式是否正确！'))
      } else {
        callback()
      }
    }
    // 重复密码验证
    const pwdAgainCheck = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error('再次输入新密码不能为空'))
      } else if (this.form.newPassword != this.form.passWord1) {
        return callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        oldPassword: undefined, //旧密码
        newPassword: undefined, //请再次输入新密码
        passWord1: undefined, //请再次输入新密码
      },
      rules: {
        oldPassword: [
          {
            required: true,
            message: '请输入旧密码',
            trigger: ['change', 'blur'],
          },
        ],

        newPassword: [
          {
            required: true,
            validator: pwdCheck,
            trigger: ['change', 'blur'],
          },
        ],
        passWord1: [
          {
            required: true,
            validator: pwdAgainCheck,
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    //跳登录
    loginBtn() {
      uni.reLaunch({
        url: '/pages/login/login',
      })
    },
    //提交
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.submitData(this.form)
        } else {
          this.$api.msg('请填写相关信息')
        }
      })
    },
    // 修改密码提交
    async submitData(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-auth/userAccount/updatePassword',
        val
      )
      if (code === '0') {
        this.$api.msg('修改密码成功')
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/login/login',
          })
        }, 200)
      } else {
        this.$api.msg(message)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.editpassword-box {
  height: 100vh;
  background: #f6f6f6;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0rpx 30rpx 40rpx;
  .editpassword_text {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .remack {
      color: #999999;
      margin: 24rpx 0;
    }
    .editpassword-form-box {
      background-color: #fff;
      border-radius: 10rpx;
      padding: 30rpx 40rpx 10rpx;
      .u-form-item {
        padding: 0;
        height: 120rpx;
      }
      /deep/.u-form-item__message {
        margin-top: 8rpx;
        white-space: nowrap;
        padding-left: 0rpx !important;
      }
    }
    .login-logo {
      width: 240rpx;
      height: 60rpx;
      margin: 40rpx 0 0 0;
    }
  }
  .row-box {
    display: flex;
    margin-right: 16rpx;
  }
  .getCode-box {
    width: 100rpx;
    margin-left: 10rpx;
  }
  .user {
    height: 82rpx;
    width: 100%;
    padding: 0 10rpx 0 10rpx;
    border: 2rpx solid #dee0e2;
    /* box-shadow: 0px 4rpx 10rpx 0px rgba(157, 155, 155, 0.35); */
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    .svg-icon {
      width: 35rpx;
      height: 39rpx;
      margin: 0 18rpx 0 20rpx;
    }
    text {
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 64rpx;
    }

    .user_name {
      color: rgba(153, 153, 153, 1);
      height: 54rpx;
      line-height: 78rpx;
    }
  }
  .user_pwd {
    height: 82rpx;
    width: 100%;
    padding: 0 10rpx 0 10rpx;
    border: 2rpx solid #dee0e2;
    /* box-shadow: 0px 4rpx 10rpx 0px rgba(157, 155, 155, 0.35); */
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    .svg-icon {
      width: 35rpx;
      height: 39rpx;
      margin: 0 18rpx 0 20rpx;
    }
    text {
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 64rpx;
    }

    .pwd {
      color: rgba(153, 153, 153, 1);
      line-height: 78rpx;
      height: 54rpx;
    }
  }
  .passwordreset-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .register {
      color: #2e87fe;
      margin-bottom: 30rpx;
    }
  }
  .u-btn--primary {
    width: 100%;
  }
}
</style>
